<template>
  <template v-if="!props.review">
    <!-- <div class="table-tip" v-show="!props.data?.childrenCtl?.length">
        拖动至此区域
      </div> -->
    <draggable
      :list="tableData.childrenCtl"
      group="people"
      itemKey="controlName"
      :class="[
        'draggable',
        typeof tableData.props === 'object' && tableData.props.layout === 1
          ? 'table'
          : ''
      ]"
      @change="change"
    >
      <template #item="{ element, index }">
        <div
          @click.stop="formItemClick(element, index)"
          :class="
            selectItem?.uuid === element.uuid
              ? 'center-item-choice'
              : 'center-item'
          "
          :style="{
            width: element.span === 12 ? '50%' : '100%',
            margin: '5px 0px'
          }"
        >
          <div :class="['form-item', element.isMust === 1 ? 'require' : '']">
            <div class="fill">
              <a-button
                @click.stop="removeAt(index)"
                type="text"
                shape="circle"
                :size="'mini'"
                style="height: 20px; width: 20px"
              >
                <icon-close />
              </a-button>
              <!-- <icon-close /> -->
            </div>
          </div>
          <FormItem :="element" :data="element" />
          <div
            class="mask"
            :style="{
              border: element.validate === 1 ? '1px solid #ff000e' : ''
            }"
          />
        </div>
      </template>
    </draggable>
  </template>
  <template v-else>
    <!-- 表格明细，表格展示 -->
    <div
      v-if="tableData.props?.showRadar === 1"
      style="display: flex; align-items: center; margin-bottom: 16px"
    >
      能力素质等级范围：<a-input-number
        style="width: 100px"
        v-model="tableData.props.max"
        hide-button
      />
    </div>
    <div v-if="tableData.props.layout === 1">
      <a-table :data="tableData.props.tableData" stripe :pagination="false">
        <template #columns>
          <a-table-column title="序号">
            <template #cell="{ record, column, rowIndex }">{{
              rowIndex + 1
            }}</template>
          </a-table-column>
          <a-table-column
            v-for="(item, index) in tableData?.childrenCtl"
            :key="item.id"
            :dataIndex="item.ctlCode"
            :width="300"
            :title="item[labelName]"
            align="center"
          >
            <template #cell="{ record, column, rowIndex }">
              <FormDesignRender
                v-if="!onlyRead"
                v-model:data="tableData.childrenCtl[index]"
                :review="props.review"
                v-model:values="
                  tableData.props.tableData[rowIndex][
                    item.ctlCode ? item.ctlCode : item.uuid
                  ]
                "
              />
              <div v-else>
                {{
                  tableData.props.tableData[rowIndex][
                    item.ctlCode ? item.ctlCode : item.uuid
                  ]
                }}
              </div>
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="160"
            title="操作"
            fixed="right"
            v-if="!onlyRead"
          >
            <template #cell="{ record, rowIndex }">
              <a-button :type="'text'" @click="copyRow(record, rowIndex)"
                >复制</a-button
              >
              <a-button :type="'text'" status="danger" @click="delRow(rowIndex)"
                >删除</a-button
              >
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div v-else>
      <!-- 表格明细-表单形式 TODO:改成单个表单 -->
      <a-form
        class="table-review"
        :model="row"
        v-for="(row, index) in tableData.props.tableData"
        :key="row.id"
      >
        <div class="action">
          <span>第 {{ index + 1 }} 项</span>
          <a-button
            type="text"
            shape="circle"
            size="mini"
            @click="delRow(index)"
          >
            <template #icon>
              <icon-close />
            </template>
          </a-button>
        </div>
        <a-form-item
          v-for="column of tableData?.childrenCtl"
          :field="column.cnName"
          :label="column.cnName"
          :key="column.ctlCode"
        >
          <div class="layout-form-component">
            <FormDesignRender
              :data="column"
              :review="props.review"
              v-model:values="row[column.ctlCode]"
            />
          </div>
        </a-form-item>
      </a-form>
    </div>
    <div v-if="!onlyRead">
      <a-button :type="'text'" @click="addRow">添加数据</a-button>
    </div>
  </template>
  <EchartRadar
    v-if="tableData.props?.showRadar === 1"
    :eChartsOption="eChartsOption"
  />
</template>
<script setup lang="ts">
import draggable from 'vuedraggable';
import FormDesignRender from '../../FormDesignRender.vue';
import FormItem from '../../index.vue';
import useForm from '@/hooks/useForm';
import EchartRadar from '../TableDetail/conponents/EchartRadar.vue';
import { useVModel } from '@vueuse/core';
import useControlFormStore from '@/store/controlForm';

const controlFormStore = useControlFormStore();
const labelName = controlFormStore.fieldNames.labelName;
type EChartsOption = echarts.EChartsOption;

const props = withDefaults(
  defineProps<{
    data?: any;
    isSub?: boolean;
    review?: boolean;
    onlyRead?: boolean;
  }>(),
  {
    isSub: false,
    review: false,
    onlyRead: false
  }
);
const emits = defineEmits(['update:data']);
const tableData = useVModel(props, 'data', emits);
const { selectItem, ctlSelectedIndex, remove, formItemClick, change } =
  useForm();

//根据下标移除控件
const removeAt = (index: any) => {
  if (!tableData.value.childrenCtl) return;
  remove(tableData.value.childrenCtl, index);
};
const addRow = () => {
  let row: any = {};
  tableData.value?.childrenCtl?.forEach((item: any) => {
    row[item.ctlCode] = void 0;
  });
  if (!tableData.value.props.tableData?.length)
    tableData.value.props.tableData = [];
  tableData.value.props.tableData.push(row);
  // console.log("tableta", props);
};
//复制一行
const copyRow = (recode: any, index: number) => {
  tableData.value.props.tableData.splice(index, 0, { ...recode });
};
// 删除一行
const delRow = (rowIndex: number) => {
  if (!tableData.value.props.tableData.length) return;
  tableData.value.props.tableData.splice(rowIndex, 1);
};
const eChartsOption = computed<EChartsOption>(() => {
  return {
    title: {
      show: false,
      text: 'Basic Radar Chart'
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      // shape: 'circle',
      indicator: indicatorArr.value,
      // axisLabel: {
      //   show: true, // 是否显示刻度数值
      //   formatter: function (value) {
      //     // 使用函数模板格式化刻度数值
      //     return value; // 在数值后添加单位"kg"
      //   }
      // }
      // 设置轴线样式
      axisLine: {
        lineStyle: {
          // width: 2, // 设置轴线宽度，加粗外边线
          // color: "red", // 设置轴线颜色
        }
      },
      axisName: {
        color: '#373739' //各顶端文字颜色
      }
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        itemStyle: {
          color: '#f00'
        },
        areaStyle: {
          // 设置区域填充颜色
          // color: 'rgba(220, 220, 220, 0.8)', // 这里也可以设置透明度
          // 设置阴影颜色
          // shadowColor: 'rgba(0, 0, 0, 0.5)',
          // 设置阴影模糊大小
          // shadowBlur: 10,
          // 设置图形透明度
          opacity: 0.08 // 这里设置的是区域本身的透明度，与上面的color中的透明度不同
        }, //区域阴影
        symbol: 'none',
        data: [
          {
            value: radarValues.value
            // name: "Allocated Budget",
          }
        ]
      },
      {
        name: 'Budget vs spending',
        type: 'radar',
        symbol: 'none',
        itemStyle: {
          color: '#0057f9' //
        },
        color: '#eee',
        data: [
          {
            value: (function () {
              let res: number[] = [];
              for (let i = 0; i < radarValues.value.length; i++) {
                res.push(tableData.value.props.max);
              }
              return res;
            })()
            // name: "Allocated Budget",
          }
        ]
      }
    ]
  };
});
const radarValues = ref<number[]>([]);
const indicatorArr = ref<any[]>([]);
//雷达图数据
const getRadarData = () => {
  radarValues.value = [];
  indicatorArr.value = [];
  const radarName = tableData.value?.props?.radarLable;
  const radarNum = tableData.value?.props?.radarValue;
  tableData.value?.props?.tableData?.forEach((item: any, index: any) => {
    //根据表头code获取对应的值
    const name = item[radarName];
    const value = Number(item[radarNum]);
    radarValues.value?.push(value);

    if (index === 0) {
      indicatorArr.value?.push({
        name,
        max: tableData.value.props.max,
        axisLabel: { show: true }
      });
    } else {
      indicatorArr.value?.push({
        name,
        max: tableData.value.props.max
      });
    }
    indicatorArr.value.forEach((item) => {
      item.max = tableData.value.props.max;
    });
  });
};

watchEffect(() => {
  getRadarData();
});
</script>
<style lang="less" scoped>
.draggable {
  position: relative;
  min-height: 50px;
  // background-color: #f6f6f6;

  padding: 5px;
  z-index: 1999;
}
.table {
  display: flex;
  background-color: #f6f6f6;
}
.vecational-work {
  .noType {
    width: 100%;
    height: 32px;
    background: #f2f3f5;
    border-radius: 1px;
    margin-bottom: 20px;
    line-height: 32px;
    &:before {
      content: '';
      border-left: 5px solid #165dff;
      margin-right: 8px;
      height: 32px;
      line-height: 32px;
    }
  }
}
.center-item {
  position: relative;
  border: #fff solid 1px;
  background: white;
  border: rgb(236, 236, 236) solid 1px;

  .form-item {
    display: flex;
    height: 20px;
    position: relative;
    text-align: right;
    justify-content: space-between;

    .fill {
      z-index: 999;
      font-size: 14px;
    }
  }
  .form-item::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid skyblue;
    border-right: 15px solid transparent;
  }
  .require::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid rgb(136, 138, 139) !important;
    border-right: 15px solid transparent;
  }
  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: move;
  }
}
.center-item-choice {
  position: relative;
  border: #3296fa solid 1px;
  background: white;
  // border: rgb(73, 56, 148) solid 1px;
  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: move;
    // background: rgba(22, 93, 255, 0.2);
    // border: #3296fa solid 1px;
  }
  .form-item {
    // pointer-events: none;
    display: flex;
    height: 20px;

    .fill {
      z-index: 999;
    }
  }

  // .form-item::after {
  //   z-index: 999;
  //   content: "\2716";
  //   width: 20px;
  //   height: 20px;
  //   text-align: center;
  //   color: #3296fa;
  // }
  .require::after {
    z-index: 999;
    content: '';
    width: 20px;
    height: 20px;
    text-align: center;
    color: #3296fa;
  }
  .form-item::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid skyblue;
    border-right: 15px solid transparent;
  }
  .require::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid rgb(136, 138, 139) !important;
    border-right: 15px solid transparent;
  }
}

.center-item:hover {
  border: #3296fa dashed 1px;

  .form-item {
    // pointer-events: none;
    display: flex;
    z-index: 999;

    .fill {
      z-index: 999;
    }
  }

  // .form-item::after {
  //   z-index: 999;
  //   content: "\2716";
  //   width: 20px;
  //   height: 20px;
  //   text-align: center;
  //   color: #3296fa;
  // }
  .require::after {
    z-index: 999;
    content: '';
    width: 20px;
    height: 20px;
    text-align: center;
    color: #3296fa;
  }
}
.table-review {
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
  width: 100%;
  .action {
    text-align: right;
    color: #b8b8b8;
  }
  .layout-form-component {
    width: 100%;
  }
}
.gg {
  position: relative;
  .table-tip {
    color: #7d7d7f;
    z-index: 9999;
    position: absolute;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
